<template>
  <div class="step2">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">

      <a-card class="card" title="流量选择" :bordered="false">
        <a-form-item label="投放范围" prop='fanwei' >
          <a-radio-group v-model="form.fanwei" default-value="a" button-style="solid" >
            <a-radio-button :value="1">
              默认
            </a-radio-button>
            <a-radio-button :value="2">
              自定义
            </a-radio-button>
          </a-radio-group>
          <a-card size="small" title="流量范围" style="width: 260px;margin-top:20px;" v-if="form.fanwei == 2" :headStyle="{'background': '#f6f7fa;'}">
            <a-checkbox-group v-model="form.fanwei_zidinyi" >
              <a-row>
                <a-col :span="24" v-for="(item,index) in zidinyi_options" :key="index" style="padding:2px 0;">
                  <a-checkbox :value="item.value">
                    {{item.label}}
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </a-form-item>
      </a-card>

      <a-card class="card" title="落地页信息" :bordered="false">
        <a-form-item label="移动访问网址" >
          <a-select show-search v-model="form.jimuyudizhi" placeholder="选择已有页面" option-label-prop="label" style="width: 500px;" @search="jimuyu_search" :filter-option="false">
            <a-select-option :value="item.pageId" :label="item.pageName" v-for="(item,index) in jimuyudizhi_options_show" :key="index">
              <div class="jimuyu_select">
                <div class="name line1">
                  {{item.pageName}}
                </div>
              </div>
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-card>

      <a-card class="card" title="定向设置" :bordered="false">

        <a-form-item label="地域" :wrapperCol="{ span: 12 }">
          <a-radio-group v-model="form.diyuType" button-style="solid">
            <a-radio-button :value="1">不限</a-radio-button>
            <a-radio-button :value="2">省市区（县）</a-radio-button>
          </a-radio-group>
          <div v-if="form.diyuType == 2">
            <m-region :selected="form.diyuValue" @select="selectRegion"  datasource="prefecture" mergeChecked="upwards" />
          </div>
        </a-form-item>

        <a-form-item label="年龄" :wrapperCol="{ span: 12 }">
          <a-radio-group v-model="form.nianlingType" button-style="solid">
            <a-radio-button :value="1">不限</a-radio-button>
            <a-radio-button :value="2">指定年龄段</a-radio-button>
            <a-radio-button :value="3">自定义</a-radio-button>
          </a-radio-group>
          <a-card size="small" title="年龄范围" style="width: 440px;margin-top:20px;" v-if="form.nianlingType == 2" :headStyle="{'background': '#f6f7fa;'}">
            <a-radio-group name="radioGroup" v-model="form.nianlin_zhidin">
              <a-radio :value="item.value" v-for="(item,index) in nianlin_zhidin_options" :key="index" style="margin:4px ;">
                {{item.label}}
              </a-radio>
            </a-radio-group>
          </a-card>
          <div v-if="form.nianlingType == 3">
            <a-select style="width: 120px" v-model="form.startAge" @change="startAgeChange">
              <a-select-option :value="item" v-for="(item,index) in startAgelist" :key="index">
                <span v-if="item < startAge[1]">{{item}}岁</span>
                <span v-else>{{item}}岁级以上</span>
              </a-select-option>
            </a-select>
            -
            <a-select style="width: 120px" v-model="form.endAge" >
              <a-select-option :value="item.value" v-for="(item,index) in endAgelist" :key="index" :disabled="item.disabled">
                <span v-if="item.value < endAge[1]">{{item.value}}岁</span>
                <span v-else>{{item.value}}岁级以上</span>
              </a-select-option>
            </a-select>
          </div>
        </a-form-item>

        <a-form-item label="性别" :wrapperCol="{ span: 12 }">
          <a-radio-group v-model="form.sex" button-style="solid">
            <a-radio-button :value="0">不限</a-radio-button>
            <a-radio-button :value="1">男</a-radio-button>
            <a-radio-button :value="2">女</a-radio-button>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="兴趣" :wrapperCol="{ span: 12 }">
          <a-radio-group v-model="form.interestType" button-style="solid">
            <a-radio-button :value="0">自动定向</a-radio-button>
            <a-radio-button :value="1">指定兴趣</a-radio-button>
          </a-radio-group>
          <div v-if="form.interestType == 1">
            <m-interests :selected="form.interestValue" @select="interestChange" />
          </div>
        </a-form-item>

      </a-card> 

      <a-card class="card" title="投放出价" :bordered="false">
        <a-form-model-item label="付费模式" :wrapperCol="{ span: 12 }">
          <a-radio-group v-model="form.payType" button-style="solid">
            <a-radio-button :value="0">oCPM</a-radio-button>
            <a-radio-button :value="1">oCPC</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="目标转化" :wrapperCol="{ span: 3 }">
          <a-input v-model="form.payMubiao" disabled/>
        </a-form-model-item>
        <a-form-model-item label="目标转化出价" :wrapperCol="{ span: 3 }">
          <a-input v-model="form.payPrice" />
        </a-form-model-item>
      </a-card> 

      <a-card class="card" title="单元名称" :bordered="false" >
        <a-form-model-item label="单元名称" :wrapperCol="{ span: 12 }">
          <a-input v-model="form.danyuanName" />
        </a-form-model-item>
      </a-card> 

      <a-card>
        <a-button @click="prevStep">上一步</a-button>
        <a-button type="primary" @click="nextStep" style="margin-left:16px;">保存并继续</a-button>
        <a-button style="margin-left:16px;">保存并关闭</a-button>
        <a-button style="margin-left:16px;" @click="close">关闭</a-button>
      </a-card>
    </a-form-model>
  </div>
</template>

<script>
import { getPromotionUrls } from '@/api/xinxiliu/danyuan'

const zidinyi_options = [ //自定义选项
  { label: '百度信息流', value: 1 },
  { label: '好看视频', value: 2 },
  { label: '贴吧', value: 3 },
  { label: '百度小说', value: 4 },
];

// const jimuyudizhi_options = [
//   { label: '(商品ID:37376992) 【男神夏季必备】买一送一魅力型男香水 清新淡香 持久男人味', value: 1 },
//   { label: '(商品ID:36076739) 【解放双手】去污除渍地缝死角 浴室墙面 一物两用 刷6397', value: 2 },
//   { label: '(商品ID:33517915) 【养生福利】促销商品-沙棘原浆 沙棘果生榨  天然无4672', value: 3 },
// ]

export default {
  name: 'Step2',
  i18n: require('./i18n'),
  data() {
    return {
      form:{
        fanwei:1,
        fanwei_zidinyi:[1,2,3,4],
        jimuyudizhi:'',
        diyuType:1, // 地域选择->type
        diyuValue:[], // 地域选择->省市区选择
        nianlingType:1, // 年龄选择->type
        nianlin_zhidin:0, //年龄选择->指定年龄段
        startAge:18, //年龄选择->自定义->开始年龄
        endAge:56, //年龄选择->自定义->结束年龄
        sex:0, //性别 0:不限，1:男，2女
        interestType:0, //兴趣type
        interestValue:[], //兴趣->指定兴趣
        payType:0, //付费模式 
        payMubiao:'商品支付成功', //投放出价->目标转化
        payPrice:'', //投放出价->目标转化出价
        danyuanName:'', //单元名称
      },
      nianlin_zhidin_options:[
        {label:'18岁以下',value:1},
        {label:'18-24岁',value:2},
        {label:'25-34岁',value:3},
        {label:'35-44岁',value:4},
        {label:'45-54岁',value:5},
        {label:'54岁以上',value:6},
      ],
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      zidinyi_options,
      jimuyudizhi_options:[],
      jimuyudizhi_options_show:[],
      startAge:[18,56],
      endAge:[27,56],
      startAgelist:[],
      endAgelist:[],
    };
  },
  created(){
    console.log('create-danyuanadd')
    this.getPromotionUrls()
    this.setAge()
  },
  methods: {
    getPromotionUrls(){ // 获取基木鱼落地页列表
      getPromotionUrls({}).then((e) => {
        if(e.errcode == 0){
          this.jimuyudizhi_options = e.data.body.data
          this.jimuyudizhi_options_show = e.data.body.data
        }
      }).catch(() => {
        
      });
    },
    setAge(){ //配置：年龄->自定义 年龄范围
      let startAgelist = []
      let endAgelist = []
      for(let i=this.startAge[0];i<=this.startAge[1];i++){
        startAgelist.push(i)
      }
      for(let i=this.endAge[0];i<=this.endAge[1];i++){
        endAgelist.push({
          value:i,
          disabled:false
        })
      }
      this.startAgelist = startAgelist
      this.endAgelist = endAgelist
    },
    startAgeChange(startAge){ //年龄->自定义->变化规则
      let endAgelist = this.endAgelist
      for(let item of endAgelist){
        if(item.value - startAge >= 9){
          item.disabled = false
        }else{
          if(item.value < this.endAge[1]){
            item.disabled = true
          }else{
            item.disabled = false
          }
        }
      }

      //判断form.endAge是否在范围内
      if(this.form.endAge - startAge < 9){
        let idx = endAgelist.findIndex(e=>!e.disabled)
        this.form.endAge = endAgelist[idx].value
      }
    },
    interestChange(data){ //兴趣->指定兴趣改变
      this.form.interestValue = data;
    },

    jimuyu_search(e){
      let jimuyudizhi_options_show = this.jimuyudizhi_options.filter(o=>o.pageName.indexOf(e) != -1)
      // console.log(jimuyudizhi_options_show);
      this.jimuyudizhi_options_show = JSON.parse(JSON.stringify(jimuyudizhi_options_show));
      // console.log(this.jimuyudizhi_options_show);
    },
    nextStep () {
      let _this = this
      _this.loading = true
      setTimeout(function () {
        _this.$router.push('/xinxiliu/add/step2')
        // _this.$emit('nextStep')
      }, 1500)
    },
    selectRegion(data){
      console.log('地域选择-',data)
      this.form.diyuValue = data
    },
    prevStep () {
      this.$router.push('/xinxiliu/add/step1')
      // this.$emit('prevStep')
    },
    close(){
      this.$router.push('/xinxiliu')
    }
  }
}
</script>

<style lang="less" scoped>
  .step2{
    height: calc(100vh - 48px);
    overflow-y: auto;
  }

  .jimuyu_select{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name{
      width: 100%;
    }
  }
  .stepFormText {
    margin-bottom: 24px;
    :global {
      .ant-form-item-label,
      .ant-form-item-control {
        line-height: 22px;
      }
    }
  }
  .card{
    margin-bottom: 20px;
  }
  .line1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
